<template>
  <div class="hot-container">
    <el-row :gutter="12" class="hot-list">
      <el-col v-for="i in 8" :key="i" :xs="8" :sm="8" :md="8" :lg="6" :xl="6" :class="{'mobile-item':showMobilePage}" class="hot-item">
        <iframe frameborder="0" width="100%" height="480px" class="hot-iframe" />
      </el-col>
    </el-row>
    <div class="phone-check">
      <el-tooltip popper-class="hot-tooltip" effect="light" placement="top">
        <div slot="content">
          <qrcode :str="url" :width="88" :height="88" class="qrcode" style="padding: 16px 16px 0"/>
          <div style="font-size: 12px; font-weight: 400; color: #666666; line-height: 17px; padding: 0 12px 8px">钉钉扫码查看更多</div>
        </div>
        <div class="phone-text">
          <span>手机查看</span>
          <div style="width: 16px;height: 32px;margin-left: 8px;line-height: 36px;">
            <img :src="code" alt="code">
          </div>
        </div>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';
import qrcode from '@/components/Qrcode';
import code from '@/assets/hotIndex/qrCode.png';
const { hotUrl } = process.env; // 获取热榜地址
export default {
  components: {
    qrcode
  },
  data() {
    return {
      code,
      url: hotUrl
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo,
      'showMobilePage': state => state.app.showMobilePage
    }),
    thirdToken() {
      return this.userInfo.thirdToken || '';
    },
    linkSrc() {
      let params = '';
      params += `token=${this.thirdToken}`;
      if (params) {
        params += '&origin=gc';
      } else {
        params += 'origin=gc';
      }
      if (hotUrl.indexOf('?') >= 0) {
        return `${hotUrl}/pages/home/index3&${params}`;
      } else {
        return `${hotUrl}/pages/home/index3?${params}`;
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
      const frames = document.querySelectorAll('.hot-iframe');
      if (frames && frames.length === 8) {
        frames.forEach((frame, i) => {
          // 7: 是ACFUN 暂时没有数据改成展示8 8:是小红书
          frame.src = `${this.linkSrc}&platform=${i === 7 ? 8 : i}`;
        });
      }
    });
  }
};
</script>
<style lang="scss">
.hot-container {
  .phone-check {
    margin-top: 10px;
    position: fixed;
    right: 32px;
    bottom: 80px;
    width: 120px;
    height: 32px;
    background: #406EFF;
    box-shadow: 2px 2px 6px 0px #CDD3E1;
    border-radius: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    .phone-text {
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      font-weight: 500;
      color: #fff;
      line-height: 16px;
      img {
        width: 100%;
        height: 16px;
      }
    }
  }
  .hot-list {
    padding: 20px 20px 32px;
    .hot-item {
      margin-bottom: 12px;
      .hot-iframe {
        box-shadow: 2px 2px 8px 0px #DDE1EA;
        border-radius: 8px;
      }
    }
  }
}
</style>
<style lang="scss">
  .hot-tooltip {
    padding: 0;
    border: none;
  }
  .mobile-item {
    width: 100% !important;
  }
  .hot-tooltip.is-light {
    border: none !important;
    box-shadow: 2px 2px 8px 0px #DDE1EA;
    .popper__arrow {
      border: none !important;
      box-shadow: 2px 2px 8px 0px #DDE1EA;
    }
  }
</style>
